<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>购物界面</title>
</head>

<script>
    window.onload = function () {
        showShop();
    }

    async function del(id) {
        let info = await ajaxGet("/shopCar/del", {productId: id})
        if (info == "ok") {
            await showShop();
        } else {
            alert("服务器出错");
        }
    }

    async function update(id, num) {
        let param = {
            shopCarId: id,
            num: num
        }
        let info = await ajaxGet("/shopCar/update", param);
        if (info != "ok") {
            alert("更新失败")
        } else {
            await showShop();
        }
    }

    async function showShop() {
        let info = await ajaxGet("/shopCar/findShopCarByUserId");
        let str = "";
        let total = 0;
        for (let i = 0; i < info.length; i++) {
            let obj = info[i];
            str += `<tr><td>${obj.productBean.productName}</td>
                <td>${obj.productBean.productPrice}</td>
                <td>${obj.productBean.productLocation}</td>
                <td> <input onblur="update(${obj.shopCarId},this.value)" type="text" value="${obj.num}"></td>
                <td>${obj.num * obj.productBean.productPrice}</td>
                 <td><a href="javascript:del(${obj.productBean.productId})">删除此商品</a></td>
                </tr>`;
            total += obj.num * obj.productBean.productPrice;
        }
        $("bodys").innerHTML = str;
        $("moneySpan").innerHTML = total;
    }

    function addOrder() {
        location.href = "/html/custom/addOrder.html?totalPrice=" + $("moneySpan").innerHTML;
    }


</script>


<body>
<h3>你的购物车有如下商品</h3>
<div style="display: flex;justify-content: center;padding-top: 30px">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>商品名</th>
            <th>单价</th>
            <th>产地</th>
            <th>购买数量</th>
            <th>单项总价</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="bodys">
        </tbody>
    </table>

</div>
购物车总价：￥<span id="moneySpan"></span>
<hr>
<div style="display: flex;justify-content: center">
    <button type="button" class="layui-btn"><a href="/html/index.html">继续购物</a></button>
    <button type="button" class="layui-btn"><a href="javascript:addOrder()">结账</a></button>
</div>
</body>
</html>